<style rel="stylesheet/scss" lang="scss">
.page_d_con_right .desc{
    margin-bottom: 20px;
}

</style>

<template>
    <div class="info_flow_content" style="position:relative" @click="bodyEvent">
        <!-- <div class="info_ad_search">
            <div class="info_a_s_content">
                <div class="dateSelect">
                    <div class="block">
                        <span class="demonstration">选择日期</span>
                        <el-date-picker
                            v-model="dateValue"
                            type="daterange"
                            align="right"
                            placeholder="选择日期范围"
                            @change="dateChange"
                            format="yyyy 年 MM 月 dd 日"
                            :picker-options="$store.state.pickerOptions2">
                        </el-date-picker>
                        <el-button type="danger" class="page_d_s_button" style="float:none" @click="pageInfo">查询</el-button>
                    </div>
                    <div class="dateBut">
                        <router-link :to="{name:'proManaNew'}">
                            <el-button type="primary"><i class="el-icon-plus"></i>新建创意</el-button>
                        </router-link>
                    </div>
                </div>
                <div class="realTimeCitySearch">
                    <el-select v-model="platform_items.model_value"
                                :placeholder="platform_items.placeHolder" class="con_select unBorderRadius"
                                clearable>
                        <el-option
                            v-for="item in platform_items.options"
                            :key="item.platformId"
                            :label="item.platformName"
                            :value="item.platformId">
                        </el-option>
                    </el-select>
                    <el-input  class="page_d_select" placeholder="搜索"></el-input>
                    <el-button type="danger" class="page_d_s_button" @click="pageInfo">搜索</el-button>
                </div>
            </div>
        </div> -->
        <div class="info_ad_search">
            <div class="info_a_s_content">
                <div class="customerProCitySearch">
                    <div class="block">
                        <span class="demonstration">选择日期</span>
                        <el-date-picker
                            v-model="dateValue"
                            type="daterange"
                            align="right"
                            placeholder="选择日期范围"
                            format="yyyy/MM/dd"
                            @change="dateChange"
                            :picker-options="$store.state.pickerOptions2">
                        </el-date-picker>
                    </div>
                    <el-select v-model="platform_items.model_value"
                                :placeholder="platform_items.placeHolder" class="con_select unBorderRadius"
                                clearable>
                        <el-option
                            v-for="item in platform_items.options"
                            :key="item.id"
                            :label="item.val"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button class="page_d_s_button" type="danger" @click="pageInfo">查询</el-button>
                    <!-- <div class="dateBut">
                        <router-link :to="{name:'proManaNew'}">
                            <el-button type="primary"><i class="el-icon-plus"></i>新建创意</el-button>
                        </router-link>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="info_ad_table">
            <div class="page_d_title">
                <i style="visibility:hidden;"></i><span></span>
                <div class="tableVisibleMenu">
                    <p class="visibleMenuBut" @click.stop="changeCheckStatus"></p>
                    <div class="visibleMenuSelect" v-if="visibleMenuSelectStatus" @click.stop="">
                        <el-checkbox-group
                            v-model="checkedCities"
                            :min="1"
                            @change="checkedChange">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <div class="tableDetail">
                <el-table
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%"
                >
                    <el-table-column
                        v-for="(c, i) in table_column"
                        :key="c.prop"
                        :fixed="c.fixed"
                        :sortable="c.sortable"
                        :prop="c.prop"
                        :label="c.label"
                        :formatter="c.format"
                        min-width="100"
                        v-if="c.visible">
                    </el-table-column>
                    <!-- <el-table-column
                        label="创意预览"
                        min-width="100"
                        class-name="exitBut">
                        <template slot-scope="scope">
                                <el-button v-if="(scope.$index<1)?false:true"  class="tuiaBtn"  type="danger" @click.stop="preImg(scope.row.adId)">预览</el-button>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        label="查看"
                        min-width="100"
                        class-name="exitBut">
                        <template slot-scope="scope">
                                <div @click="newContract(scope.row.adId)"><i class="el-icon-view"></i></div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="con_pager">
            <div class="block">
                <!--<span class="demonstration">直接前往</span>-->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-sizes="page.sizes"
                    :page-size="page.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.count">
                </el-pagination>
            </div>
        </div>
        <div class="page_d_con_right big_img" v-if="replaceInfo.bigImgStatus">
            <i class="el-icon-close" @click="exit_replace"></i>
            <div class="page_d_current page_create_current">
                <div class="current_page_title create_page_title">创意预览</div>
                <div class="desc">{{replaceInfo.desc}}</div>
                <div class="current_img">
                    <img v-for="img_src in replaceInfo.picUrls"
                            :src="img_src"
                            class="image replaceImg">
                </div>
            </div>
        </div>
        <div class="mengceng" @click="exit_replace" v-if="replaceInfo.mengcengStatus">123</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visibleMenuSelectStatus: false,
                checkedCities: ['日期', '创意ID', '创意名称', '投放状态', '点击均价',  '展现','点击','点击率','花费'],
                cities: ['日期', '创意ID', '创意名称',  '投放状态', '点击均价',  '展现','点击','点击率','激活数','花费'],
                citiesFilterVal: ['date', 'adNo', 'adName', 'status', 'price', 'dspNum','clkNum','clkRate','activeSum','consume'],
                table_column: [
//                    {fixed: false, prop: 'date', label: '日期', sortable: true, visible: true},
                    {fixed: false, prop: 'adNo', label: '创意ID', sortable: false, visible: true},
                    {fixed: false, prop: 'adName', label: '创意名称', sortable: false, visible: true},
                    {fixed: false, prop: 'status', label: '投放状态', sortable: false, visible: true},
//                    {fixed: false, prop: 'price', label: '点击均价', sortable: false, visible: true},
                    {fixed: false, prop: 'dspNum', label: '展现', sortable: false, visible: true},
                    {fixed: false, prop: 'clkNum', label: '点击', sortable: false, visible: true},
                    {fixed: false, prop: 'clkRate', label: '点击率', sortable: false, visible: true},
                    {fixed: false, prop: 'activeSum', label: '激活数', sortable: false, visible: false},
                    {fixed: false, prop: 'consume', label: '花费', sortable: false, visible: true},
                ],
                replaceInfo: {
                    bigImgStatus: false,
                    mengcengStatus: false,
                    picUrls: [],
                    desc:''
                },
                page: {
                    sizes: [10, 20, 30, 50],
                    offset: 1,
                    limit: 10,
                    count: 0,
                    currentPage: 1,
                },
                tableData: [
                ],
                dateValue: [new Date(),new Date()],
                platform_items: {
                    model_value: '0',
                    placeHolder: '投放状态',
                    options: [
                        {
                            val: '已投放',
                            id: '0'
                        },
                        {
                            val: '已暂停',
                            id: '1'
                        },
                    ]
                },
                params: {
                    sDateTime: '',
                    eDateTime:'',
                },
            };
        },
        activated() {
            if(!this.$route.meta.isBack|| this.isFirstEnter){
                // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
                this.dateChange();
                this.pageInfo();
            }
            // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
            this.$route.meta.isBack=false;
            // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
            this.isFirstEnter=false;
        },
        created() {
            this.isFirstEnter=true;
        },
        methods: {
            /*查询表格数据*/
            pageInfo() {
                if(!(this.dateValue&&this.dateValue[0])){
                    this.$message({
                        type: 'info',
                        message: '请选择日期'
                    });
                    return false;
                }
                this.$http({
                    method: 'get',
                    url: this.apiUrl.groupAdDisplay,
                    params: {
                        curPage: this.page.offset,
                        limit: this.page.limit,
                        sDateTime:this.params.sDateTime,
                        eDateTime:this.params.eDateTime,
                        status:this.platform_items.model_value,
                    }
                }).then(res => {
                    if (res.status = 200) {
                        var totalNums = res.data.totalNums;
                        this.page.count = parseInt(totalNums);
                        var data = res.data;
//                        if(data.adListResponse.length>0){
//                            data.adListResponse.unshift({adNo:'总计',activeNum:data.activeSum,clkNum:data.clkSum,clkRate:data.clkRateSum,consume:data.consumeSum,cpc:data.cpcSum,cpm:data.cpmSum,dspNum:data.dspSum,activeSum:data.activeSum});
//                        }
                        for(var i=0;i<data.adListResponse.length;i++){
                            if(data.adListResponse[i].status==0){
                                data.adListResponse[i].status = '已投放'
                            }else if(data.adListResponse[i].status==1){
                                data.adListResponse[i].status = '已暂停'
                            }
                        }
                        this.tableData = data.adListResponse;
                    }else{
                        this.$message({
                            type: 'error',
                            message: '服务器繁忙，请稍后再试'
                        });
                    }
                }).catch(err => {

                });
            },
            /*详情*/
            detailInfo (id) {
                this.$http({
                    method:'get',
                    url:this.apiUrl.adAddetail,
                    params:{adid:id}
                }).then(res =>{
                    if(res.status==200){
                        // console.log(res);
                        var urlStr = res.data.adAttrJson.imgUrls;
                        var urlStr1 = urlStr.substring(0,urlStr.length-1);
                        var imgUrlArr = urlStr1.split(';');
                        this.replaceInfo.picUrls = imgUrlArr;
                        this.replaceInfo.desc = res.data.adAttrJson.desc;
                        // console.log(this.replaceInfo.picUrls);
                    }
                }).catch();
            },
            /*页码翻页*/
            handleCurrentChange(val) {
                this.page.offset = val;
                this.pageInfo();
            },
            /*改变每页条数*/
            handleSizeChange(val) {
                this.page.limit = val;
                this.pageInfo();
            },
            /*显示、隐藏表格列*/
            checkedChange() {
                for (let item of this.table_column) {
                    var index = this.checkedCities.indexOf(item.label);
                    index >= 0 ? item.visible = true : item.visible = false;
                }
            },
            /*显示、隐藏表格列容易*/
            changeCheckStatus() {
                this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
            },
            /*body事件*/
            bodyEvent() {
                this.visibleMenuSelectStatus = false;
            },
            /*改变时间选择器*/
            dateChange() {
                if (this.dateValue != '' && typeof this.dateValue != 'undefined' && this.dateValue[0] != null && this.dateValue[1] != null) {
                    this.params.sDateTime = this.formatDateTime(this.dateValue[0], 'y-m-d');
                    this.params.eDateTime = this.formatDateTime(this.dateValue[1], 'y-m-d');
                } else {
                    this.params.sDateTime = '';
                    this.params.eDateTime = '';
                }
            },
            /*退出预览*/
            exit_replace() {
                this.replaceInfo.bigImgStatus = false;
                this.replaceInfo.mengcengStatus = false;
            },
            preImg(id) {
                this.detailInfo(id);
                this.replaceInfo.mengcengStatus = true;
                this.replaceInfo.bigImgStatus = true;
            },
            newContract(id) {
                this.$router.push({path: 'admcheck', query: {id: id}});
            },
        }
    };
</script>

